<template>
  <div ref="pageComBox" class="app-container page_wrapper">
    <div ref="otherBox">
      <QueryForm v-model="form" @search="getChannelList" />
    </div>
    <!-- <ChannelTable :list="channelList"/> -->
    <el-table
      ref="multipleTable"
      :data="channelList"
      border
      style="width: 100%"
      :max-height="tableHeight"
      :key="tableHeight"
      v-tabscroll="$getTableHeight"
    >
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="nickname" label="渠道名称" />
      <el-table-column prop="company" label="公司名称" />
      <el-table-column prop="key" label="加密key" />
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" plain size="mini" @click="handleEdit(row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            plain
            size="mini"
            @click="handleDelete(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <BasePagination
      v-model="page.page"
      :total="totalCount"
      @change="pageOnChange"
    />
  </div>
</template>

<script>
import QueryForm from "./_components/QueryForm.vue";
import ChannelTable from "./_components/ChannelTable.vue";
import { getChannelList, deleteChannel } from "@/api/channel/index";
export default {
  name: "ChannelManage",
  components: { QueryForm, ChannelTable },
  data() {
    return {
      form: {
        nickname: "",
      },
      page: {
        page: 1,
        size: 100,
      },
      totalCount: 0,
      channelList: [],
      tableHeight: 0,
    };
  },
  created() {
    this.getChannelList();
  },
  mounted() {
    // 计算表格的高度
    let _this = this;
    this.$getTableHeight();
    window.onresize = function () {
      _this.$getTableHeight();
    };
  },
  methods: {
    async getChannelList() {
      this.showAppLoading();
      const params = {
        ...this.page,
        paramObject: this.form,
      };
      const res = await getChannelList(params);
      this.hideAppLoading();
      if (!res.result) return;
      this.channelList = res.data.dataList;
      this.totalCount = res.data.totalCount;
      this.page.page = res.data.page;
    },

    pageOnChange(row) {
      this.page.page = row.page;
      if (row.pageSize) {
        this.page.size = row.pageSize;
      }
      this.getChannelList();
    },

    handleDelete(id) {
      console.log("handleDelete");
      this.$confirm("是否确定删除渠道?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteChannel(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleEdit(row) {
      console.log(row);
      const { id, company, nickname } = row;
      this.$router.push({
        name: "ChannelCreate",
        params: {
          type: "edit",
          id,
          nickname,
          company,
        },
      });
    },
    async deleteChannel(id) {
      console.log(id);
      const { code } = await deleteChannel({ id });
      if (code !== 200) return;
      this.$message.success("删除成功");
      this.getChannelList();
    },
  },
};
</script>
